<template name="adminRooms">
	<div class="main-content-flex">
		<section class="page-container page-list flex-tab-main-content">
			{{> header sectionName="Rooms" fixedHeight="true" fullpage="true"}}
			<div class="content">
				{{#unless hasPermission 'view-room-administration'}}
					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
				{{else}}
					<form class="search-form" role="form">
						<div class="rc-input__wrapper">
							<div class="rc-input__icon">
								{{#if isLoading}}
									{{> loading }}
								{{else}}
									{{> icon block="rc-input__icon-svg" icon="magnifier" }}
								{{/if}}
							</div>
							<input id="rooms-filter" type="text" class="rc-input__element"
									 placeholder="{{_ "Search"}}" autofocus dir="auto">
						</div>
						<label><input type="checkbox" name="room-type" value="c"> {{_ "Channels"}}</label>
						<label><input type="checkbox" name="room-type" value="d"> {{_ "Direct_Messages"}}</label>
						<label><input type="checkbox" name="room-type" value="p"> {{_ "Private_Groups"}}</label>
						<label><input type="checkbox" name="room-type" value="l"> {{_ "Omnichannel"}}</label>
						<label><input type="checkbox" name="room-type" value="discussions"> {{_ "Discussions"}}</label>
					</form>
					<div class="results">
						{{{_ "Showing_results" roomCount}}}
					</div>
					{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize}}
						<thead>
							<tr>
								<th width="30%"><div class="table-fake-th">{{_ "Name"}}</div></th>
								<th width="20%"><div class="table-fake-th">{{_ "Type"}}</div></th>
								<th width="20%"><div class="table-fake-th">{{_ "Users"}}</div></th>
								<th width="10%"><div class="table-fake-th">{{_ "Msgs"}}</div></th>
								<th width="10%"><div class="table-fake-th">{{_ "Default"}}</div></th>
								<th width="10%"><div class="table-fake-th">{{_ "Featured"}}</div></th>
							</tr>
						</thead>
						<tbody>
							{{#each rooms}}
								<tr>
									<td width="30%"><div class="rc-table-wrapper">
										<div class="rc-table-avatar">{{> avatar url=url roomIcon="true"}}</div>
										<div class="rc-table-info">
											<span class="rc-table-title">
												{{>icon icon=getIcon block="rc-table-icon"}} {{roomName}}
											</span>
										</div>
									</div></td>
									<td width="20%"><div class="rc-table-wrapper">{{type}}</div></td>
									<td width="20%"><div class="rc-table-wrapper">{{usersCount}}</div></td>
									<td width="10%"><div class="rc-table-wrapper">{{msgs}}</div></td>
									<td width="10%"><div class="rc-table-wrapper">{{default}}</div></td>
									<td width="10%"><div class="rc-table-wrapper">{{#if featured}}True{{else}}False{{/if}}</div></td>
								</tr>
							 {{else}} {{# with searchText}}
							<tr class="table-no-click">
								<td>{{_ "No_results_found_for"}} {{.}}</td>
							</tr>
							{{/with}}
							{{/each}}
							{{#if isLoading}}
								<tr class="table-no-click">
									<td class="table-loading-td" colspan="{{#if showLastMessage}}5{{else}}4{{/if}}">{{> loading}}</td>
								</tr>
							{{/if}}
						</tbody>
					{{/table}}
				{{/unless}}
			</div>
		</section>
		{{#with flexData}}
			{{> flexTabBar}}
		{{/with}}
	</div>
</template>
